<div class="epc-parts-list">
  <div class="operate">
    <button
      apes-button
      [disabled]="numberOfChecked === 0"
      [apesType]="'primary'"
      (click)="handleClick()">新增
    </button>
    <button
      apes-button
      apes-popconfirm
      apesTrigger="click"
      [apesPopConfirmTitle]="popConform"
      apesPopConfirmPlacement="bottom"
      apesOkText="确认"
      apesCancelText="取消"
      (apesOnConfirm)="handleConfirmClick(1)"
      [disabled]="numberOfChecked === 0"
      [apesType]="'primary'">编译
    </button>
    <button
      apes-button
      apes-popconfirm
      apesTrigger="click"
      [apesPopConfirmTitle]="popConform"
      apesPopConfirmPlacement="bottom"
      apesOkText="确认"
      apesCancelText="取消"
      (apesOnConfirm)="handleConfirmClick(0)"
      [disabled]="numberOfChecked === 0"
      [apesType]="'primary'">取消编译
    </button>

    <span *ngIf="numberOfChecked">选中 {{ numberOfChecked }} 项数据</span>
  </div>
  <apes-table style="height: calc( 100% - 28px )" #basicTable [apesFrontPagination]="false" apesBordered [apesNoResult]="'无数据'"
              [apesData]="listOfData" [apesScroll]="{ x: '1840px', y: 'calc( 100% -28px )' }">
    <thead>
    <tr>
      <th
        apesWidth="40px"
        apesShowCheckbox
        apesLeft="0px"
        [(apesChecked)]="isAllDisplayDataChecked"
        [apesIndeterminate]="isIndeterminate"
        (apesCheckedChange)="checkAll($event)"
      ></th>
      <th apesWidth="150px" apesLeft="40px">位置</th>
      <th apesWidth="150px" apesLeft="190px">零件编号</th>
      <th apesWidth="150px" apesLeft="340px">零件名称</th>
      <th apesWidth="150px">配件名称</th>
      <th apesWidth="150px">最后编译日期</th>
      <th apesWidth="150px">编译标记</th>
      <th apesWidth="150px">备注1</th>
      <th apesWidth="150px">备注2</th>
      <th apesWidth="150px">OE描述</th>
      <th apesWidth="150px">实物图片</th>
      <th apesWidth="150px">用量</th>
      <th apesWidth="150px">替换号</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <!--      位置、零件编号、零件中文名称、配件名称、最后编译日期（门店权限看不到）、备注1、备注2、OE描述、实物图片、用量、替换号（门店权限看不到）、配件名称报错反馈-->
      <td
        apesLeft="0px"
        apesShowCheckbox
        [(apesChecked)]="mapOfCheckedId[data.partChineseName]"
        [apesDisabled]="!data.partChineseName || !data.partNumber"
        (apesCheckedChange)="refreshStatus($event)"
      ></td>
      <td apesLeft="40px"
        style="max-width: 150px; word-break: break-all">{{ data.svn }}</td>
      <td  apesLeft="190px" style="max-width: 150px; word-break: break-all">{{ data.partNumber }}</td>
      <!--      <td [title]="data.partName">{{ data.partName }}</td>-->
      <td apesLeft="340px" style="max-width: 150px; word-break: break-all">{{ data.partChineseName }}</td>
      <td style="max-width: 150px; word-break: break-all">{{ data.partDescName }}</td>
      <td style="max-width: 150px; word-break: break-all">{{ data.lastParseDate }}</td>
      <td>{{data.parseSign === 1 ? '是' : '否'}}</td>
      <td style="max-width: 150px; word-break: break-all" [title]="data.remake1 ? data.remake1 : '无'" [innerHTML]="data.remake1 ? data.remake1 : '无'"></td>
      <td style="max-width: 150px; word-break: break-all" [title]="data.remake2 ? data.remake2 : '无'" [innerHTML]="data.remake2 ? data.remake2 : '无'"></td>
      <td style="max-width: 150px; word-break: break-all">{{ data.oems }}</td>
      <td>
        <button [disabled]="data.imageName.length === 0" (click)="data.previewVisible=true">查看</button>
        <apes-modal [apesVisible]="data.previewVisible" [apesContent]="modalContent" [apesFooter]="null"
                    (apesOnCancel)="data.previewVisible=false">
          <ng-template #modalContent>
            <img *ngFor="let file of data.imageName" [src]="file" [ngStyle]="{ 'width': '100%', borderBottom: '2px solid red'}"/>
          </ng-template>
        </apes-modal>
      </td>
      <td style="max-width: 150px; word-break: break-all">{{ data.qty }}</td>
      <td style="max-width: 150px; word-break: break-all">{{ data.replaceMent }}</td>
    </tr>
    </tbody>
  </apes-table>
</div>

<ng-template #popConform>
  <div style="font-size: 12px">
    当前待处理的目录名称:
    <span *ngFor="let item of listOfCache()" style="color: skyblue; padding: 0px 6px">{{item}}</span>
  </div>
</ng-template>
